.page {
  width: 100%;
  height: 100%;
  background: #f3f4f5;
}

#sudoku {
  .container {
    padding: 0 40rpx;
    .user {
      position: relative;
      margin-bottom: 40rpx;
      .user-level,
      .user-point {
        margin-bottom: 16rpx;
        font-size: 30rpx;
        color: rgba(0, 0, 0, 0.87);
        text {
          color: #de3435;
        }
      }
      .rule {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 28rpx;
        padding: 0 0 20rpx 20rpx;
        color: #72ace3;
      }
    }
    .grid-wrapper {
      margin: 0 auto;
      .grid {
        position: relative;
        float: left;
        border: 4rpx solid #000;
        margin-top: -4rpx;
        margin-left: -4rpx;
        &.choosed {
          box-shadow: 0px 0px 5px 2px #259b24 inset;
        }
        .symbol {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 24rpx;
          text-align: left;
          color: rgba(0, 0, 0, 0.54);
          padding-left: 8rpx;
          width: 100rpx;
          height: 40rpx;
          line-height: 40rpx;
        }
        .answer {
          width: 100%;
          height: 100%;
          text-align: center;
          font-size: 42rpx;
          font-weight: bold;
          &.size-3 {
            font-size: 56rpx;
          }
          &.size-4 {
            font-size: 52rpx;
          }
          &.size-5 {
            font-size: 48rpx;
          }
          &.size-6 {
            font-size: 42rpx;
          }
          &.show-answer {
            color: #259b24;
          }
          &.wrong {
            color: #f36c60;
          }
        }
      }
    }
    .level,
    .opt {
      margin-top: 60rpx;
    }
    .level {
      display: flex;
      height: 80rpx;
      flex-direction: row;
      justify-content: space-between;
      view {
        width: 150rpx;
        height: 80rpx;
        font-size: 30rpx;
        color: #fff;
        text-align: center;
        line-height: 80rpx;
        border-radius: 10rpx;
        &.level-3 {
          background-color: #51d072;
        }
        &.level-4 {
          background-color: #92d051;
        }
        &.level-5 {
          background-color: #f68622;
        }
        &.level-6 {
          background-color: #5184d0;
        }
      }
    }
    .opt {
      .complete,
      .relogin {
        border-radius: 10rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        color: #fff;
        font-size: 32rpx;
      }
      .complete {
        background-color: #de3435;
      }
      .relogin {
        background-color: #92cf5a;
        margin-top: 20rpx;
      }
    }
  }
}
